<template>
  <div class="jeecg-basic-table visit-statistics-view">
    <div class="tip">
      <span>访客数据统计</span>
      <span class="tip-img"></span>
    </div>
    <div class="jeecg-search-layer">
      <a-form ref="form" :model="queryParam">
        <a-row :gutter="[16, 16]">
          <a-col :span="8">
            <a-form-item label="站点">
              <a-select v-model:value="queryParam.stationCode" allowClear placeholder="请选择站点">
                <a-select-option value="">请选择</a-select-option>
                <template v-for="(item, index) in stationList" :key="index">
                  <a-select-option :value="item.stationCode">
                    {{ item.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="时间">
              <div class="flex">
                <a-select v-model:value="queryParam.type" style="width: 80px; margin-right: 12px">
                  <a-select-option :value="1">年</a-select-option>
                  <a-select-option :value="2">月</a-select-option>
                </a-select>
                <template v-if="queryParam.type == 1">
                  <a-date-picker picker="year" v-model:value="queryParam.year" format="YYYY" valueFormat="YYYY" show-time />
                </template>
                <template v-if="queryParam.type == 2">
                  <a-date-picker v-model:value="queryParam.month" picker="month" valueFormat="YYYY-MM" />
                </template>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-form-item>
              <a-button type="primary" @click="onSearch">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="jeecg-table-view">
      <div class="total">
        <span>访客总数</span>
        <span>{{ total }}</span>
      </div>
      <div ref="echartsVisit" id="echarts-pie"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, getCurrentInstance, onMounted, nextTick } from 'vue';
import { visitStatisticsApi } from '/@/api/data-statistics/index';
import { stationListApi } from '/@/api/station/index';
import { useECharts } from '/@/hooks/web/useECharts';
import moment from 'moment';

let queryParam = ref({
  // 查询方式 1年,2月,3日
  type: 2,
  // 月份
  month: moment().format('YYYY-MM'),
  // 年份
  year: '',
  // 站点编码
  stationCode: '',
});

// 站点列表
let stationList = ref([]);

let total = ref(0);

const echartsVisit = ref<HTMLDivElement | null>(null);

const { setOptions, echarts, resize } = useECharts(echartsVisit as Ref<HTMLDivElement>);

let echartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
      label: {
        show: true,
        backgroundColor: '#333',
      },
    },
  },
  legend: {
    top: '10px',
    data: [],
  },
  grid: {
    top: '10%',
    left: '2%',
    right: '2%',
    bottom: '8%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: '#333',
        margin: 15,
      },
      interval: 0,
      rotate: 0,
    },
    data: [],
  },
  yAxis: {
    type: 'value',
    name: '',
  },
  series: [
    {
      type: 'line',
      label: {
        show: true,
        position: 'top',
        fontSize: 20,
      },
    },
  ],
};

watch(
  () => queryParam.value.type,
  (e) => {
    if (e == 1) {
      queryParam.value.year = moment().format('YYYY');
    } else {
      queryParam.value.month = moment().format('YYYY-MM');
    }
  }
);

/**
 * 初始化数据统计
 */
function initVisitStatistics() {
  let data = {
    ...queryParam.value,
  };
  if (data['type'] == 1) {
    delete data['month'];
  } else {
    delete data['year'];
  }
  delete data['type'];
  visitStatisticsApi(data).then((res) => {
    let keys = Object.keys(res['data']);
    total.value = res['total'];
    let values = [];
    echartsOption.xAxis.data = [];
    echartsOption.series[0].data = [];
    echartsOption.xAxis.axisLabel.interval = parseInt(keys.length / 10, 10);
    Object.values(res['data']).map((_, i) => {
      if (_ !== '') {
        echartsOption.xAxis.data.push(keys[i]);
        values.push(_);
      }
    });
    echartsOption.series[0].data = values;
    setOptions(echartsOption);
  });
}

/**
 * 搜索数据
 */
function onSearch() {
  initVisitStatistics();
}

onMounted(async () => {
  stationList.value = await stationListApi({});
  queryParam.value.stationCode = stationList.value[0]['stationCode'];
  // 初始化数据统计
  initVisitStatistics();
});
</script>


<style lang="less" scoped>
.visit-statistics-view {
  margin: 12px;
  background: #fff;
  .tip {
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-17.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    span {
      font-size: 16px;
      color: #fff;
    }
  }
  .jeecg-search-layer {
    margin: 0 0 17px;
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
    .ant-form {
      max-width: auto;
      .ant-form-item {
        margin-bottom: 24px;
      }
      :deep(.ant-col) {
        width: auto;
      }
    }
  }
  .jeecg-table-view {
    width: calc(100% - 24px);
    height: calc(100vh - 340px);
    padding: 12px;
    margin: 24px auto;
    background: #fff;
    .total {
      font-size: 26px;
      text-align: center;
      font-weight: bold;
    }
    #echarts-pie {
      width: calc(100% - 24px);
      height: 100%;
    }
  }
}
</style>